<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ msg }}  <button @click="msg = 1111">chang</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      // 八大生命周期函数: 这些生命周期函数, 会在vue的生命周期的不同阶段, 会自动被vue调用
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          list: []
        },
        // 创建前 第一个钩子 并不能访问属性和方法
        // beforeCreate () {
        //   console.log('beforeCreate 在data数据注入到实例之前, 此时实例身上没有数据')
        //   console.log(this.msg)
        // },
        // 创建后 表示组件已经创建完毕 可以访问属性和方法. 一般会在这个钩子中调用一些初始化的方法
        // created () {
        //   console.log('created 在data数据注入到实例之后, 此时实例身上有数据')
        //   console.log(this.msg)
        // },
        // 挂载前 在这个钩子中 dom挂载还未挂载,结构的值还没有被替换成真正的数据
        /* beforeMount () {
          // console.log('beforeMount 在生成的结构替换视图之前')
          console.log(document.querySelector('#app').innerHTML)
        }, */
        // 挂载后 dom中的数据已经更新成了最新的数据  dom操作 会在mounted钩子
        /* mounted () {
          // console.log('mounted 在生成的结构替换视图之后, 此时dom更新完成了')
          console.log(document.querySelector('#app').innerHTML)
        }, */
        // 更新前 数据已经更新完毕了 dom结构还没有更新数据
        beforeUpdate () {
          console.log('beforeUpdate 数据变化了, dom更新之前')
          console.log(document.querySelector('#app').innerHTML)
          console.log(this.msg)
        },
        // 更新后, 视图更新成了最新的数据 此时data中和dom结构中的都是更新后的数据
        updated () {
          console.log('updated 数据变化了, dom更新之后')
          console.log(document.querySelector('#app').innerHTML)
          console.log(this.msg)
        },
        // 销毁前 组件中的数据和方法都是可以使用的
        // beforeDestroy () {
        //   console.log('beforeDestroy')
        // },
        // 销毁后  组件中的数据和方法都随之销毁了
        // destroyed () {
        //   console.log('destroyed 释放完资源了')
        // }
      })
    </script>
  </body>
</html>